<template>
    <div class="memberinfo-layout">
        <div class="info-back">
            <el-row :gutter="20">
                <el-col :span="18">
                    <div class="back-icon" @click="back()">
                        <i class="fa fa-arrow-left" aria-hidden="true"></i>
                    </div>
                </el-col>
                <el-col :span="4" class="btns">
                    <!--<el-button type="primary"  class="save red-btn" @click="submitForm('ruleFormUser')">保存</el-button>-->
                    <el-button type="primary" class="save red-btn" @click="onSubmit">
                        保存
                    </el-button>
                </el-col>
            </el-row>
        </div>
        <div class="member-info-title">
            <el-form :model="addForm" ref="addForm" label-width="100px" class="member-info-form">
                <el-form-item label="所属栏目名称:" prop="categoryName">
                    <el-input v-model="addForm.categoryName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="作者:" prop="author">
                    <el-input v-model="addForm.author"></el-input>
                </el-form-item>
                <el-form-item label="标题:" prop="title">
                    <el-input v-model="addForm.title"></el-input>
                </el-form-item>
                <el-form-item label="副标题:" prop="subTitle">
                    <el-input v-model="addForm.subTitle"></el-input>
                </el-form-item>
                <el-form-item label="主题词:" prop="name">
                    <el-input v-model="addForm.terms"></el-input>
                </el-form-item>
                <el-form-item label="是否发表:">
                    <el-select v-model="value">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="正文:" prop="remark" class="member-mark">
                    <el-input type="textarea" v-model="addForm.content"></el-input>
                </el-form-item>
                <el-form-item label="上传图片:" class="member-upload">
                    <div class="el-left">
                        <el-upload
                                class="avatar-uploader"
                                :action="uploadUrl"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload"
                                :on-error="onError">

                            <img v-if="imageUrl" :src="imageUrl" class="avatar" v-model="uploadUrl">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>

</template>

<script>
    export default {
        name: 'keepalive-false',
        data: function () {
            return {
                options: [{
                    value: '1',
                    label: '发表'
                }, {
                    value: '0',
                    label: '不发表'
                }],
                value: '1',
                addForm: {
                    parentId: '',
                    categoryName: '',
                    author: '',
                    title: '',
                    subTitle: '',
                    terms: '',
                    content: ''
                },
                imageUrl: '',
                uploadUrl: this.$cfg.api_url + "/vue-uploads",

            }
        },
        watch: {
            getCategoryId(){
            }
        },
        computed: {
            getCategoryId: function () {
                this.addForm.parentId = this.$store.state.categoryID.id;
                this.addForm.categoryName = this.$store.state.categoryID.name;

            }
        },
        created: function () {
            if (this.$route.query.item) {
                this.addForm.categoryName = this.$route.query.item.categoryName;
                this.addForm.author = this.$route.query.item.author;
                this.addForm.content = this.$route.query.item.content;
                this.addForm.title = this.$route.query.item.title;
                this.addForm.subTitle = this.$route.query.item.subTitle;
                this.addForm.terms = this.$route.query.item.terms;
                this.addForm.content = this.$route.query.item.content;
                this.value = this.$route.query.item.state;
            }
        },
        methods: {
            handleAvatarSuccess(res, file) {
                let self = this;
                this.imageUrl = URL.createObjectURL(file.raw);
                if (res) {
                    self.addForm.portraitId = res[0].id;
                }

            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            onError: function (err, file, fileList) {
                alert(err)
            },
            back: function () {
                console.log("========>back");
                this.$router.go(-1);
            },
            onSubmit(){
//                http://192.168.1.136:8081/shop/post/
                let self = this;
                let args = {
                    'categoryId': self.addForm.parentId,
                    'categoryName': self.addForm.categoryName,
                    'cname': self.addForm.categoryName,
                    'cid': self.addForm.parentId,
                    'author': self.addForm.author,
                    'title': self.addForm.title,
                    'subTitle': self.addForm.subTitle,
                    'terms': self.addForm.terms,
                    'state': self.value,
                    'portraitId': self.addForm.portraitId,
                    'content-text': self.addForm.content,
                    'attachmentIds': '',
                    'content': self.addForm.content,
                    'postType':'article',
                    'category': {
                        'id': self.addForm.parentId
                    },
                    'attachment': {
                        'id': self.addForm.portraitId,
                    },
                    'attachments':[]
                }
                console.log(args)
                this.$axioxs.post("/post/", args)
                    .then(function (res) {
                            self.$router.push('/mainColumn')
                        },
                        (res) => {
                            this.$message({
                                showClose: true,
                                type: 'error',
                                message: res
                            });
                        })
            }
        }

    }
</script>
<style scoped>
    .memberinfo-tit {
        box-shadow: none !important;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .member-info-form {
        width: 90%;
        padding-top: 0px;
        margin: 0 auto;
    }
    .member-info-title{
        padding-top: 10px;
    }
</style>